<!--  -->
<template>
  <div>
     <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="10"
          ><div class="text item">
            <el-input placeholder="请输商品名" class="input-with-select"
            v-model="dataForm.key" clearable @clear="getProductList">
              <el-button slot="append" icon="el-icon-search" @click="getProductList"></el-button>
            </el-input></div
        ></el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="4">
            <Menu @tree-node-click="treeNodeClick"></Menu>
        </el-col>
        <el-col :span="20">
        <!-- 商品列表区 -->
        <el-table :data="productList" highlight-current-row  border>
          <el-table-column
            type="index"
            width="70">
          </el-table-column>
          <el-table-column
            property="images"
            label="图标"
            width="120">
            <template slot-scope="scope">
        　　　　<img :src="scope.row.images" class="headimag"/>
        　　</template>
          </el-table-column>
        <el-table-column label="商品名" prop="proName"></el-table-column>
          <el-table-column label="价格(元)" prop="price" width="100px"></el-table-column>
          <el-table-column label="重量(kg)" prop="weight" width="100px"></el-table-column>
          <el-table-column label="库存数量" prop="stockCount" width="100px"></el-table-column>
          <el-table-column
            property="publishStatus"
            label="上架状态"
            width="110">
            <template slot-scope="scope">
            <el-tag v-if="scope.row.publishStatus=== 1"  type="success"><i class="el-icon-success">已上架</i></el-tag>
            <el-tag v-else type="info"><i class="el-icon-circle-close">未上架</i></el-tag>
          </template>
          </el-table-column>
          <el-table-column label="操作" width="180px">
            <template slot-scope="scope">
              <el-button type="primary"  size="small"
              @click="showEditDialog(scope.row)">编辑</el-button>
              <el-button
                type="danger"
                size="small"
                @click="removeById(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[5,10,15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage">
        </el-pagination>
      </el-col>
      </el-row>
    </el-card>
     <!-- 修改商品的对话框 -->
    <el-dialog
      title="修改商品信息"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
      <!-- 内容主体 -->
      <el-form
        :model="editUserForm"
        ref="editUserFormRef"
        :rules="editUserFormRules"
        label-width="100px"
      >
        <!-- <el-form-item label="图标" prop="header">
          <img :src="editUserForm.images" alt="" class="headimag">
          <OssUpload v-model="editUserForm.images"></OssUpload>
        </el-form-item> -->
        <el-form-item label="商品名"  prop="proName">
          <el-input v-model="editUserForm.proName" ></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="editUserForm.price"></el-input>
        </el-form-item>
        <el-form-item label="重量(kg)" prop="weight">
          <el-input v-model="editUserForm.weight"></el-input>
        </el-form-item>
        <el-form-item label="库存数量" prop="stockCount">
          <el-input v-model="editUserForm.stockCount"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUser()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Menu from './components/Menu'
// import OssUpload from '../../components/OssUpload'
export default {
  proName:"Product",
  data () {
    return {
       dataForm: {
          key: '',
        },
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
      selectCatId:'',
      productList: [],
      // 控制商品修改对话框
      editDialogVisible: false,
      editUserFormRules:{
        proName:[{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        weight:[{ required: true, message: '请输入商品重量', trigger: 'blur' }],
        price:[{ required: true, message: '请输入商品的最低价格', trigger: 'blur' }],
        stockCount:[{ required: true, message: '请输入商品重量', trigger: 'blur' }],
      },
      editUserForm: { },
    };
  },
  created(){
    this.getProductList()
  },
  components:{ Menu},
  methods: {
     // 子组件树被点击传回来数据 node节点
    treeNodeClick(data,node,component){
      // console.log(data,node,component)
      this.selectCatId = data.catId
       this.getProductList()
    },
    // 获取商品数据
    async  getProductList(){
      console.log(this.selectCatId)
        this.productList = []
        if(!this.selectCatId){
           const {data:res}  = await this.$http.get(`/dqxmall/prosysproinfo/getAllShopByCatalogId?catalogId=${this.selectCatId}&page=${this.pageIndex}&limit=${this.pageSize}&key=${this.dataForm.key}`) 
           console.log("所有商品",res)
        this.totalPage = res.page.totalCount
        res.page.list.forEach(item=>{
            var data = {}
            data.id = item.id
            // data.publishStatus = item.publishStatus
            if(item.images.length){
              data.images = item.images[0]
            }
            else{
              data.images = ''
            }
            data.proName = item.proName
            data.weight = item.weight
            data.price = item.price
            data.stockCount = item.stockCount
            data.publishStatus = item.publishStatus
            this.productList.push(data)
        })
        }
       else{
         const {data:res}  = await this.$http.get(`/dqxmall/prosysproinfo/getAllShopByCatalogId?catalogId=${this.selectCatId}`) 
         console.log("商品",res)
        this.totalPage = res.page.totalCount
        res.page.list.forEach(item=>{
            var data = {}
            data.id = item.id
            // data.publishStatus = item.publishStatus
            if(item.images.length){
              data.images = item.images[0]
            }
            else{
              data.images = ''
            }
            data.proName = item.proName
            data.weight = item.weight
            data.price = item.price
            data.stockCount = item.stockCount
            data.publishStatus = item.publishStatus
            this.productList.push(data)
        })
       }
    },
    // 监听pageSize改变
    handleSizeChange(newSize){
      // console.log(newSize)
      this.pageSize = newSize
      this.getProductList()
    },
    // 监听页码值改变事件
    handleCurrentChange(newPage){
      // console.log(newPage)
      this.pageIndex = newPage
       this.getProductList()
    },
     // 通过Id删除商品
    async removeById (id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该商品, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除！')
      }
      const { data: res } = await this.$http.post('/dqxmall/prosysproinfo/delete',[id])
      if (res.code !== 0) {
        return this.$message.error('删除商品失败！')
      }
      this.$message.success('删除商品成功！')
      this.getProductList()
    },
    // 编辑商品信息
    async showEditDialog (row) {
      this.editUserForm = row
      this.editDialogVisible = true
    },
    // 监听修改商品对话框的关闭事件
    editDialogClosed () {
      this.$refs.editUserFormRef.resetFields()
    },
    // 修改商品信息
    async editUser () {
      // console.log('this.editUserForm',this.editUserForm)
      const {data:res} = await this.$http.post("/dqxmall/prosysproinfo/update",this.editUserForm)
      if(res.code !== 0){
        this.$message.error("修改失败")
      }
      this.getProductList()
      this.editDialogVisible = false
      this.$message.success("修改成功")
    },

  },
}
</script>
<style lang='less' scoped>
.headimag{
  height: 70px;
  width: 70px;
}
</style>